<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="shortcut icon" href="#"/>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css/mobileSelect.css">
    <script src="js/mobileSelect.js" type="text/javascript"></script>
    <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js" ></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            background-color: #efedd6;
            width: 100%;
            height: 100%;
        }
        .mainDiv{
            width: 100%;
            height: 100%;
            background-color: white;
            /*position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);*/
        }
        .topDiv{
            width: 100%;
            height: 10%;
            background-color: #efedd6;
            position: sticky;
            top: 0;
        }
        #bodyDiv{
            width: 100%;
            height: 30%;
        }
        .manyDiv{
            background-color: green;
            width: 90%;
            height: 27%;
            border-radius: 50px;
            margin: 8% 5% 8% 5%;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="mainDiv">
  <div class="topDiv">
      <div style="width: 70%;height: 50%;float: left;">
          <div id="trigger2" style="background-color: #1e83d3;text-align:center;"></div>
      </div>
      <div style="width: 30%;height: 50%;float: right;">
          <button onclick="test()">选择时间</button>
      </div>
  </div>
  <div id="bodyDiv">
  </div>
  <div>
      <h1>开始时间</h1><input type="text" id="start">
      <h1>结束时间</h1><input type="text" id="end">
      <h1>电话</h1><input type="text" id="phone">
      <h1>理由</h1><input type="text" id="reason">
      <button id="apply">提交</button>
  </div>
</div>

</div>
</body>
<script type="text/javascript">
    var t=new Date();
    var year=t.getFullYear();
    var month=t.getMonth()+1;
    var nextMonth=t.getMonth()+2;
    var dayOne=t.getDate();
    var dayTwo=t.getDate()+1;
    var dayThree=t.getDate()+2;
    var dayFour=t.getDate()+3;
    var dayFive=t.getDate()+4;
    var daySix=t.getDate()+5;
    var daySeven=t.getDate()+6;
    const mobileSelect2 = new MobileSelect({
        trigger: '#trigger2',
        title: '地区选择',
        wheels: [
            {data:[
                    {id:'1',value:'地点'},
                    {id:'2',value:'1-101'},
                    {id:'3',value:'1-102'},
                    {id:'4',value:'1-103'},
                ]},
            {data:[
                    {id:'1',value:'年'},
                    {id:'2',value:year},
                ]},
            {data:[
                    {id:'1',value:'月'},
                    {id:'2',value:month},
                    {id:'3',value:nextMonth},
                ]},
            {data:[
                    {id:'1',value:'日'},
                    {id:'2',value:dayOne},
                    {id:'3',value:dayTwo},
                    {id:'4',value:dayThree},
                    {id:'5',value:dayFour},
                    {id:'6',value:dayFive},
                    {id:'7',value:daySix},
                    {id:'8',value:daySeven},
                ]}
        ],
        position:[1,1,1,1],
        callback:function(indexArr, data){
            var result=data;
            var str={
                "rid":"1-101",
                "date":"2022-02-28"
            }
            var strs={
                "Apply": {
                    "date": "2022-02-28",
                    "reason": "社团活动",
                    "phone": "18174678093",
                    "start": 14,
                    "end": 16,
                    "rid": "1-101",
                    "userid": "1905050126",
                    "status": 0
                }
            }
            //第一次发出数据
            str.rid=result[0].value;
            str.date=result[1].value+"-0"+result[2].value+"-"+result[3].value;
            //第二次发出数据
            strs.Apply.rid=result[0].value;
            strs.Apply.date=result[1].value+"-0"+result[2].value+"-"+result[3].value;
            $.ajax({
                type: "post",
                url: "http://mkrr62.natappfree.cc/user/queryavailable",
                dataType: "json",
                async:false,
                contentType: 'application/json',
                jsonp: 'callback',
                data:JSON.stringify(str),
                error: function(XMLHttpRequest, textStatus, errorThrown) {
                    alert(XMLHttpRequest.status);
                    alert(XMLHttpRequest.readyState);
                    alert(textStatus);
                },
                success: function (data) {
                    var json =  data ;
                    var  stl="";
                    for(var i in json.able){
                        stl+= "<h1>可用时间段："+json.able[i].start+"----"+json.able[i].end+"</h1>";
                    }
                    $("#bodyDiv").empty();
                    $("#bodyDiv").append(stl);
                }
            });
            var app=document.getElementById("apply");
            var start=document.getElementById("start");
            var end=document.getElementById("end");
            var phone=document.getElementById("phone");
            var reason=document.getElementById("reason")
            strs.Apply.reason=reason.value;
            app.onclick=function(){
                var start=document.getElementById("start");
                var end=document.getElementById("end");
                var user=document.getElementById("user");
                var phone=document.getElementById("phone");
                var reason=document.getElementById("reason")
                 strs.Apply.start=parseInt(start.value);
                 strs.Apply.end=parseInt(end.value);
                strs.Apply.phone=phone.value;
                strs.Apply.reason=reason.value;
                console.log("点击成功");
                $.ajax({
                    type: "post",
                    url: "http://mkrr62.natappfree.cc/user/apply",
                    dataType: "json",
                    async:false,
                    contentType: 'application/json',
                    jsonp: 'callback',
                    data:JSON.stringify(strs),
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        alert(XMLHttpRequest.status);
                        alert(XMLHttpRequest.readyState);
                        alert(textStatus);
                    },
                    success: function (data) {
                         console.log(data.status);
                    }
                });
            }
        }
    });
    function test(){
        mobileSelect2.show();
    }
</script>

</html>